// components/PrizeRecords.js
import React, { useState, useEffect } from'react';
import { useNavigate } from'react-router-dom';
import styles from '../css/awardItem.module.css';
import hourse3 from '../assets/hourse3.png';
import lefts from '../assets/left.png';
import { getWinningRecords } from '../api/prize.js'; // 导入新的API服务

/**
 * 奖品记录页面组件
 * 展示用户的中奖记录列表
 */
const PrizeRecords = () => {
    // 状态管理
    const [userid, setUserid] = useState(null);      // 用户ID
    const [mine, setMine] = useState(null);          // 用户信息
    const [datas, setDatas] = useState([]);          // 中奖记录数据
    const [loading, setLoading] = useState(false);   // 加载状态
    const [error, setError] = useState(null);        // 错误状态
    const navigate = useNavigate();

    /**
     * 组件挂载时执行初始化
     * 获取用户ID和信息，请求中奖记录数据
     */
    useEffect(() => {
        const id = sessionStorage.getItem("userid");
        const userMine = JSON.parse(sessionStorage.getItem("mine"));
        setUserid(id);
        setMine(userMine);
        console.log("用户信息:", userMine);
        
        if (id) {
            fetchWinningRecords(id);
        }
    }, []);

    /**
     * 获取中奖记录数据
     * @param {string} userId - 用户ID
     */
    const fetchWinningRecords = async (userId) => {
        setLoading(true);
        setError(null);
        
        try {
            const response = await getWinningRecords(userId);
            console.log("中奖记录响应:", response);
            
            if (response.code === 1 && response.data) {
                setDatas(response.data);
            } else {
                setError(response.msg || '获取中奖记录失败');
            }
        } catch (err) {
            setError(err.message || '网络错误，请重试');
            console.error("获取中奖记录错误:", err);
        } finally {
            setLoading(false);
        }
    };

    // 返回上一页
    const left = () => {
        navigate(-1);
    };

    // 返回首页
    const first = () => {
        navigate("/home");
    };

    /**
     * 渲染中奖记录列表
     * @returns {JSX.Element[]} 中奖记录列表元素数组
     */
    const renderRecords = () => {
        if (loading) {
            return (
                <div className={styles.loading}>
                    <p>加载中...</p>
                </div>
            );
        }
        
        if (error) {
            return (
                <div className={styles.error}>
                    <p>错误: {error}</p>
                </div>
            );
        }
        
        if (datas.length === 0) {
            return (
                <div className={styles.empty}>
                    <p>暂无中奖记录</p>
                </div>
            );
        }
        
        return datas.map((item, index) => {
            const dateParts = item.create_time?.split(' ')[0]?.split('-') || [];
            const formattedDate = dateParts.join('-'); // 格式化日期为 YYYY-MM-DD
            
            return (
                <div key={index} className={styles.four_block}>
                    <div>{index + 1}</div>
                    <div>{item.nickname || '-'}</div>
                    <div>{item.name || '-'}</div>
                    <div>{formattedDate || '-'}</div>
                </div>
            );
        });
    };

    return (
        <div style={{ backgroundColor: '#fff0eb', minHeight: '100vh' }}>
            {/* 顶部导航栏 */}
            <div className={styles.top}>
                <div style={{
                    display: "flex",
                    alignItems: "center",
                    whiteSpace: "nowrap",
                    width: "50%",
                    justifyContent: "space-between"
                }}>
                    <div className={styles.left}>
                        <img src={lefts} alt="" onClick={left} />
                        <div className={styles.line}></div>
                        <img id="hourse" src={hourse3} alt="" onClick={first} />
                    </div>
                </div>
                <p>中奖记录</p>
            </div>
            
            {/* 记录列表区域 */}
            <div className={styles.bigs}>
                {/* 表头 */}
                <div className={styles.four}>
                    <div>序号</div>
                    <div>昵称</div>
                    <div>奖品</div>
                    <div>时间</div>
                </div>
                
                {/* 记录内容 */}
                <div className={styles.fours}>
                    {renderRecords()}
                </div>
            </div>
        </div>
    );
};

export default PrizeRecords;